<template>
  <el-dialog title="创建用户" :visible.sync="visible" @close="onClose">
    <el-form :model="formData" ref="form">
      <el-form-item label="名称" :label-width="formLabelWidth" required>
        <el-input v-model="formData.userName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="昵称" :label-width="formLabelWidth" required>
        <el-input v-model="formData.nickName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" required>
        <el-input v-model="formData.password" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {createUser} from "@/api/sys/user";
export default {
  name: 'SysUserCreate',
  props: {
    visible: false, 
  },
  data() {
    return {
      formData: {
        userName: '',
        password: '',
      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 执行表单提交操作
          // this.formData 包含了通过校验的表单数据
          createUser(this.formData).then(res => {
            console.log('createUser - success');
            this.$emit('submit-success');
            this.onClose();
          });
        } else {
          console.log('Form validation failed');
        }
      });
    }
  }
}
</script>

<style scoped>
/* Your component styles here */
</style>
